import React from "react";

export default class BindEvent extends React.Component {
  constructor() {
    super();
    this.state = {
      msg: "哈哈",
      name: "james",
      age: 34,
      gender: "男",
    };
  }
  render() {
    return (
      <div>
        BindEvent组件
        <hr />
        {/*事件绑定里面是 函数，触发事件即可执行函数 */}
        <h3>{this.state.msg}</h3>
        <button
          onClick={() => {
            this.fun("ldf ", "jay");
          }}
        >
          按钮
        </button>
      </div>
    );
  }
  fun = (name, idol) => {
    // console.log("yo  " + name + idol);
    console.log(this.state);
    /* 这样修改，页面中使用的数据不会重新渲染
    this.state.msg = "yoyo"; */
    // 这样的方式可以实现双向的数据修改，异步修改的,放第二个参数可以进行回调，同步使用
    this.setState({
      msg: "yoyoo " + name + idol,
    });
    if (this.state.msg === "哈哈") {
      console.log("setState没有执行 ： 她是一个异步函数");
    }
    setTimeout(() => {
      if (this.state.msg === "哈哈") {
        console.log("setState没有执行 ： 她是一个异步函数");
      } else {
        console.log(
          "要使用修改后的数据，我们需要放到异步函数中（宏任务队列中）"
        );
        console.log(this.state.msg);
      }
    }, 100);

    console.log(this.state);
  };
}
